<template>
  <div class="compare-container">
    <ToTop/>
    <div class="title">
      <h2>哪款手机更适合你？</h2>
    </div>
    <table v-if="havePhone">
      <thead>
        <tr>
          <th>手机</th>
          <th v-for="(phone, i) in phones" :key="i">
            <el-dropdown trigger="click" placement="bottom">
              <span class="el-dropdown-link">
                {{ phone.name
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="dropdownItem"> </el-dropdown-item>

                <dropdownBoxVue
                  class="dropdownBox"
                  :index="i"
                  @currentProduct="currentProduct"
                />
              </el-dropdown-menu>
            </el-dropdown>
            <div class="remove" style="display: inline-block; margin-left: 5px;" @click="handleRemove(phone)">
              <i class="el-icon-circle-close" style="color: red;"></i>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- 图片 -->
        <tr>
          <td>
            <div class="td-width">
              {{ parameter.imgUrl }}
            </div>
          </td>
          <td v-for="(phone, i) in phones" :key="i">
            <img :src="phone.imgUrl" alt="图片" />
          </td>
        </tr>
        <!-- 价格 -->
        <tr>
          <td>{{ parameter.price }}</td>
          <td class="price" v-for="(phone, i) in phones" :key="i">
            {{ phone.price }}
          </td>
        </tr>
        <!-- 手机类型 -->
        <tr>
          <td>{{ parameter.phoneType }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe603;</i>{{ phone.phoneType }}
            </div>
          </td>
        </tr>
        <!-- CPU -->
        <tr>
          <td>{{ parameter.CPU }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe617;</i> {{ phone.CPU }}
            </div>
          </td>
        </tr>
        <!-- size -->
        <tr>
          <td>{{ parameter.size }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe60d;</i> {{ phone.size }}
            </div>
          </td>
        </tr>
        <!-- RAM -->
        <tr>
          <td>{{ parameter.RAM }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe68e;</i> {{ phone.RAM }}
            </div>
          </td>
        </tr>
        <!-- ROM -->
        <tr>
          <td>{{ parameter.ROM }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe61c;</i> {{ phone.ROM }}
            </div>
          </td>
        </tr>
        <!-- battery -->
        <tr>
          <td>{{ parameter.battery }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe608;</i> {{ phone.battery }}
            </div>
          </td>
        </tr>
        <!-- charge -->
        <tr>
          <td>{{ parameter.charge }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe606;</i> {{ phone.charge }}
            </div>
          </td>
        </tr>
        <!-- 指纹 -->
        <tr>
          <td>{{ parameter.fingerprint }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe60b;</i> {{ phone.fingerprint }}
            </div>
          </td>
        </tr>
        <!-- 面容 -->
        <tr>
          <td>{{ parameter.faceId }}</td>
          <td v-for="(phone, i) in phones" :key="i">
            <div class="haveIcon">
              <i class="iconfont">&#xe7a5;</i>
              {{ phone.faceId === "" ? "支持" : "不支持" }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-empty style="height: 300px;margin-bottom: 150px;" description="去添加对比吧~" v-else></el-empty>
  </div>
</template>

<script>
import dropdownBoxVue from "./dropdownBox.vue";
import ToTop from '../../components/ToTop.vue';
export default {
  comments:{
    ToTop,
  },
  data() {
    return {
      parameter: {
        imgUrl: "图片",
        price: "价格",
        phoneType: "手机类型",
        CPU: "CPU",
        size: "尺寸",
        RAM: "运行内存",
        ROM: "存储容量",
        battery: "电池容量",
        charge: "充电功率",
        fingerprint: "指纹识别",
        faceId: "面容识别",
      },
      phones: [
       
      ],
      havePhone:true,
    };
  },
  mounted(){
    // this.$store.state.phones.length=0;
    this.phones=this.$store.state.phones;
    if(this.phones.length===0){
      this.havePhone=false;
    }else{
      this.havePhone=true;
    }
  },
  methods: {
    currentProduct(product, index) {
      this.$set(this.phones, index, product);
      // const dropdown = this.$refs.dropdownRef;
      // dropdown.visible = false;
      // console.log(this.$refs.dropdownRef);
    },
    handleRemove(phone){
      this.$store.commit('removePhone',phone);
      if(this.$store.state.phones.length==0){
        this.havePhone=false;
      }else{ this.havePhone=true }
      
    }
  },
  components: {
    dropdownBoxVue,
    ToTop
},
};
</script>
<style lang="less" scoped>
.title {
  width: 100%;
  // border: 1px solid black;
  height: 200px;
  line-height: 200px;
  padding: 0;
  background-color: #fafafa;
}

.compare-container {
  width: 100%;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

table {
  border-collapse: collapse;
  width: 70%;
  margin-bottom: 100px;
  border-spacing: 0;
  border-top-left-radius: 20px;
  /* 设置左上角圆角 */
  border-top-right-radius: 20px;
  /* 设置右上角圆角 */
  border-bottom-left-radius: 20px;
  /* 设置左下角圆角 */
  border-bottom-right-radius: 20px;
  /* 设置右下角圆角 */
  overflow: hidden;
  /* 隐藏圆角溢出内容 */
}

thead {
  background-color: #f2f2f2;

  tr {
    height: 100px;
  }
}

tbody {
  tr {
    height: 150px;

    td:nth-child(1) {
      height: 100%;
      width: 100px;
      font-size: 15px;
      font-weight: bold;
    }
  }
}

.td-width {
  width: 100px;
}

th,
td {
  text-align: center;
  padding: 8px;
}

th {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #fbfdff;
}

tr:nth-child(odd) {
  background-color: #fff;
}

.price {
  color: rgb(255, 132, 0);
  font-weight: bold;
  font-size: 20px;
}

.haveIcon {
  display: flex;
  justify-content: center;
  // align-items: center;
  flex-direction: column;

  .iconfont {
    font-size: 30px;
    margin-bottom: 10px;
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #0061ca;
  font-size: 18px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.dropdownBox {
  pointer-events: auto;
  // border: 1px solid red;
  background-color: rgba(255, 255, 255, 0.5); /* 透明度为0.5 */
  // background-color: red;
  // pointer-events: none;
}
.dropdownItem {
  position: absolute;
  // border: 1px solid green;
  background-color: rgba(255, 255, 255, 0.5); /* 透明度为0.5 */
  // background-color: green;
  right: 0;
  top: 10px;
  width: 200px;
  height: 350px;
  background-color: transparent;
  z-index: -1;
  // pointer-events: none;
}
</style>

